<template>
  <div class="log">
    <h4>消费记录</h4>
    <el-collapse v-model="active" accordion>
      <template v-if="total>0" v-for="(item,index) in log" :key="index">
        <el-collapse-item :title="item.commodity" :name="index">
          <div>
            <el-descriptions  :column="1" :title="item.status">
              <el-descriptions-item label="消费">{{item.price}}</el-descriptions-item>
              <el-descriptions-item label="消费时间">{{item.create_time}}</el-descriptions-item>
              <el-descriptions-item label="备注" v-if="item.cdk == null">请联系相关管理员发放！</el-descriptions-item>
              <el-descriptions-item label="CDK" v-if="item.cdk != null"> {{item.cdk}} </el-descriptions-item
              >
            </el-descriptions>
          </div>
        </el-collapse-item>
      </template>
      <template v-else class="error">
        暂无记录
      </template>

    </el-collapse>
    <div class="page" v-if="total > limit">
      <el-pagination
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {GET} from "../../utils/Request";
import {onMounted} from "@vue/runtime-core";
import {ref} from "vue";

export default {
  name: "Expense",
  setup(){
    const state = reactive({
      log:[],
      limit:10,
      total:0,
      page:1,
      active:ref('0')
    })
    const methods = {
      async getExpense(page){
        let params = {
          limit : state.limit,
          page: page
        }
        let resp = await GET('/expense/paylog',params)
        state.log = resp.data.data
        state.total = resp.data.count
      },
      handleCurrentChange(val){
        state.page = val;
        methods.getExpense(val)
      }
    }
    onMounted(()=>{
      methods.getExpense(1)
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>